<template>
   <div>
      <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item><a href="javascript:;">订单管理</a></el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/shop/orders' }">订单列表</el-breadcrumb-item>
         <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="hengxian"></div>

      <el-table :data="products" tooltip-effect="dark" style="width: 100%" border v-loading="loading">
         <el-table-column prop="id" label="商品ID"></el-table-column>
         <el-table-column prop="image" label="缩略图">
            <template slot-scope="scope">
               <img v-if="scope.row.image" :src="scope.row.image" @click="handleShow(scope.$index,scope.row)" alt=""
                    class="image">
            </template>
         </el-table-column>
         <el-table-column prop="category_id" label="所属分类">
            <template slot-scope="scope">
               <el-tag type="primary">{{scope.row.category_name}}</el-tag>
            </template>
         </el-table-column>
         <el-table-column prop="name" label="商品名称"></el-table-column>
         <el-table-column prop="price" label="商品单价"></el-table-column>
         <el-table-column prop="num" label="购买数量"></el-table-column>
      </el-table>

      <!--查看大图-->
      <el-dialog :visible.sync="showImg" custom-class="an-img-dialog" :center="true">
         <img :src="product.img" alt="" width="100%">
      </el-dialog>
   </div>
</template>

<script>
   export default {
      name: "Show",
      data() {
         return {
            loading: false,
            showImg: false,
            products: [],
            product: {
               img: ''
            },
         }
      },
      created() {
         this.loading = true;
         const id = this.$route.params.id;
         axios.get(`/admin/shop/orders/${id}`)
            .then((res) => {
               // console.log(res.data);
               this.products = res.data;
               this.loading = false;
            })

      },
      methods: {
         //点击查看大图
         handleShow(index, row) {
            this.product.img = row.image;
            this.showImg = true;
         },
      }
   }
</script>

<style scoped>

</style>